<template>
  <div class="app-container">
    <el-row>
      <el-col :span="3">
        <mp-list-left @choose="setCurrentMp"/>
      </el-col>
      <el-col :span="20" class="margin-left-10">
        <el-tabs v-model="listQuery.type" type="border-card" @tab-click="tabChange">
          <el-tab-pane label="图片素材" name="image">
            <span slot="label"><i class="el-icon-picture-outline"/> 图片</span>
            <mp-material-pic ref="imageComponent" :platform-id="listQuery.platformId" :selected="false"/>
          </el-tab-pane>
          <el-tab-pane label="语音素材" name="voice">
            <span slot="label"><i class="el-icon-microphone"/> 语音</span>
            <mp-material-voice ref="voiceComponent" :platform-id="listQuery.platformId" :selected="false"/>
          </el-tab-pane>
          <el-tab-pane label="视频素材" name="video">
            <span slot="label"><i class="el-icon-video-camera"/> 视频</span>
            <mp-material-video ref="videoComponent" :platform-id="listQuery.platformId" :selected="false"/>
          </el-tab-pane>
          <el-tab-pane label="图文素材" name="news">
            <span slot="label"><i class="el-icon-copy-document"/> 图文</span>
            <mp-material-news ref="newsComponent" :platform-id="listQuery.platformId" :selected="false"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import MpListLeft from '@/views/wechat/mp_list_left'
import MpMaterialPic from '@/views/wechat/mp_material_pic'
import MpMaterialNews from '@/views/wechat/mp_material_news'
import MpMaterialVoice from '@/views/wechat/mp_material_voice'
import MpMaterialVideo from '@/views/wechat/mp_material_video'

export default {
  name: 'MpMaterial',
  components: { Pagination, MpListLeft, MpMaterialPic, MpMaterialNews, MpMaterialVoice, MpMaterialVideo },
  data() {
    return {
      list: [], total: 0, listLoading: true, currentMp: undefined, component: undefined,
      listQuery: { pageNo: 1, pageSize: 20, platformId: undefined, type: 'image' }
    }
  },
  methods: {
    setCurrentMp(data) {
      this.currentMp = data
      this.listQuery.platformId = data.id
      this.tabChange({ index: -1 })
    },
    tabChange(event) {
      const index = parseInt(event.index)
      this.$nextTick(() => {
        switch (index) {
          case 0:
            this.component = this.$refs.imageComponent
            break
          case 1:
            this.component = this.$refs.voiceComponent
            break
          case 2:
            this.component = this.$refs.videoComponent
            break
          case 3:
            this.component = this.$refs.newsComponent
            break
          default:
            if (!this.component) {
              this.component = this.$refs.imageComponent
            }
            break
        }
        if (this.component) {
          this.component.initList()
        }
      })
    }
  }
}
</script>
